<template>
<div class="mag_title">
    <div style="display:flex;justify-content: space-between;box-shadow: 0px 2px 2px #333333;margin-bottom:10px">
        <h2 style="display:inline-block">商品管理</h2>
        <el-row style="display:inline-block;">
            <el-button style="margin-top:18px" type="primary" plain @click="onBack">退出</el-button>
        </el-row>
    </div>
<el-button type="primary" icon="el-icon-edit" style="float:left" @click="dialogFormVisible=true">添加</el-button>
<!-------------------对话框------------------->
<el-dialog title="添加商品" :visible.sync="dialogFormVisible">
      <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图片链接" :label-width="formLabelWidth">
          <el-input v-model="form.image" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="兑换所需积分" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
          <el-button type="primary" @click="postAdd">确 定</el-button>
      </div>
</el-dialog>
<br><br>
    <!-- <ul>
      <li v-for="(item,index) in list" :key='index'>
        <img :src="item.image" alt="">
      </li>
    </ul> -->
<el-form ref="form" label-width="80px">
    <!--  :model="list" -->
<!------------表格------------->
    <el-table style="width: 100%" :data="list">
    <el-table-column
      label="ID"
      prop="_id">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="商品图片">
      <template slot-scope="scope">
          <img style="width:100px;height:100px" :src="scope.row.image" alt="">
      </template>
    </el-table-column>
    <el-table-column
      label="操作">
      <!-- <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template> -->
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="dialogFormVisible = true">Edit</el-button>
          <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->
<!-----------------对话框---------------->
            <el-dialog title="编辑商品" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片链接" :label-width="formLabelWidth">
                <el-input v-model="form.image" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="兑换所需积分" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="postChange(scope.$index, scope.row)">确 定</el-button>
            </div>
            </el-dialog>

        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
<!------------------------------------>
</el-form>
<!--<router-view/>-->
</div>
</template>

<script>
// import {mapState} from 'vuex'
  export default {
    name:'management',
    data() {
      return {
        list:[],
        form:{  
            // "_id": "60ab2c4e56ae60584bb0b3ca",
            name: "",
            price: "",
            image: ""
        },
        dialogFormVisible:false,
        formLabelWidth:'100px',
      }
    },
    created(){
        this.getList()
    },
    methods: {
      onBack(){
      // console.log(this.$store);
      this.$router.push('login');
      localStorage.removeItem('temp');
      
    },
    
    async getList(){
      const data = await this.aGet ('/admin/shopList');
      this.list=data
    },

    async postAdd(){
      const data = await this.aPost ('/admin/shopItem',{
        name: this.form.name,
        price: this.form.price,
        image: this.form.image
      });
    //   this.dialogFormVisible = false;
      console.log(data);
    },

    async postChange(index,row){
      const data = await this.aPut ('/admin/shopItem',{data:{  
            _id: row._id,
            name: this.form.name,
            price: this.form.price,
            image: this.form.image
            }
        });
        this.dialogFormVisible = false;
        console.log(index,row._id,this.form.name);
        console.log(data);
    },

    async handleDelete(index,row){
        const data = await this.aDel ('/admin/shopItem',{  
            id: row._id,
        });
        console.log(index,row._id);
        console.log(data);
        location.reload();
    }
    },

    

    // function handleEdit(index,row){
    //     this.dialogFormVisible = true;
    //     console.log(index,row);
    // }
    
  }
</script>
<style scoped>
    /* #app{
        display: flex;
        justify-content: space-between;
        justify-content: center;
        align-content: center;
        align-items: center;
        vertical-align: middle;
    } */
    
    .mag_title{
        margin: 0;
        padding: 0;
    }
</style>